<template lang="pug">
  .m-content
    .title 工单报表
    .main
      .searchs
        el-row
          el-col(:span="6")
            .flex-block
              .name 类型
              el-select.select(v-model="postConditions.type")
                el-option(v-for="item in reportformsTypes" :key="item.value" :label="item.label" :value="item.value")
          el-col(:span="6")
            .flex-block
              .name 执行方式
              el-select.select(v-model="postConditions.mode")
          el-col(:span="6")
            .flex-block
              .name 执行时间
              el-date-picker(
                v-model="datetimerange"
                type="datetimerange"
                value-format="timestamp"
                start-placeholder="时间段(起)"
                end-placeholder="时间段(止)")
          el-col(:span="6")
            .flex-block
              .name 执行结果
              el-select.select(v-model="postConditions.result")
        el-row
          el-col(:span="6")
            .searchTypeInput
              el-input( placeholder="请输入报表名称" prefix-icon="el-icon-search" v-model="postConditions.keyword")
      .operation
        el-button(type="danger" icon="el-icon-delete") 删除
      .host-table
        tr-table(:data="tableData" :columns="columns" :filterWidth="120" :selection="true")
          template(slot="ratio" slot-scope="scope")
            result-ratio(:ratios="scope.row.ratio")
          template(slot-scope="scope")
            el-button(type="text" icon="iconfont icon-daochu") 导出
            el-button(type="text" icon="el-icon-delete" class="delete") 删除
      Pagination(:total="total" :page.sync="listQuery.page_no" :limit.sync="listQuery.page_size" @pagination="getList" )
</template>
<script>
import { reportformsTypes } from '@/utils/config'
import Pagination from '@/components/Pagination'
import resultRatio from '@/components/resultRatio'
const defaulConditions = {
  type: '', // 类型
  mode: '', // 执行方式
  implementTime: '', // 执行时间
  result: '', // 执行结果
  searchType: '', // 查询类型key
  searchWord: '' // 查询类型value
}
let data = [
  {
    name: '报表名称120190101110000 ',
    type: '天翼云PON专线新装 ',
    mode: '手动执行',
    time: '2018-06-25 17:20:00 ',
    result: '成功',
    ratio: [12, 34, 5]
  },
  {
    name: '报表名称120190101110000 ',
    type: '天翼云PON专线新装 ',
    mode: '手动执行',
    time: '2018-06-25 17:20:00 ',
    result: '成功',
    ratio: [23, 45, 12]
  }
]
export default {
  components: {
    Pagination,
    resultRatio
  },
  data () {
    return {
      datetimerange: null,
      reportformsTypes,
      postConditions: Object.assign({}, defaulConditions),
      tableData: data,
      url: '@/assets/qqq.txt',
      columns: [
        { prop: 'name', label: '报表名称' },
        { prop: 'type', label: '类型' },
        { prop: 'mode', label: '执行方式' },
        { prop: 'time', label: '执行时间' },
        { prop: 'result', label: '执行结果' },
        { prop: 'ratio', label: '结果分布' }
      ],
      listQuery: {
        page_no: 1,
        page_size: 10
      },
      total: 0
    }
  },
  methods: {
    getList () {

    }
  }
}
</script>
<style lang="stylus" scoped>
.m-content
  .main
    .searchs
      .searchTypeInput
        margin 15px 0
        .el-input
          width 100%
          padding-right 28px
</style>
